
/* global document */
// TODO 查询行
import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import classnames from 'classnames'
import {FilterItem} from 'components'
import {Form, Button, Row, Col, DatePicker, Input, Cascader, Switch} from 'antd'
import city from 'utils/city'

const {Search} = Input
const {RangePicker} = DatePicker

const ColProps = {
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16,
  },
}

const TwoColProps = {
  ...ColProps,
  xl: 96,
}

const LinkFilter = ({
  onAdd,
  isMotion,
  switchIsMotion,
  onFilterChange,
  filter,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  },
}) => {
  const handleFields = (fields) => {
    // const {createTime} = fields
    // if (createTime.length) {
    //   fields.createTime = [createTime[0].format('YYYY-MM-DD'), createTime[1].format('YYYY-MM-DD')]
    // }
    return fields
  }

  const handleSubmit = () => {
    let fields = getFieldsValue()
    fields = handleFields(fields)
    onFilterChange(fields)
  }

  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  const handleChange = (key, values) => {
    let fields = getFieldsValue()
    fields[key] = values
    fields = handleFields(fields)
    onFilterChange(fields)
  }
  const {name, address} = filter

  let initialCreateTime = []
  if (filter.createTime && filter.createTime[0]) {
    initialCreateTime[0] = moment(filter.createTime[0])
  }
  if (filter.createTime && filter.createTime[1]) {
    initialCreateTime[1] = moment(filter.createTime[1])
  }

  return (
    <Row gutter={4}>

      {/*链接查询*/}
      <Col {...ColProps} xl={{span: 8}} md={{span: 16}}>
        {
          getFieldDecorator('title', {initialValue:name})(
            <Search placeholder = "输入链接标题"  enterButton = "搜索" onSearch = {handleSubmit} />
          )
        }
      </Col>

      {/*地点查询*/}
      {/*<Col {...ColProps} xl={{span: 4}} md={{span: 8}} id="addressCascader">*/}
      {/*{getFieldDecorator('address', {initialValue: address})(<Cascader*/}
      {/*style={{width: '100%'}}*/}
      {/*options={city}*/}
      {/*placeholder="输入地址"*/}
      {/*onChange={handleChange.bind(null, 'address')}*/}
      {/*getPopupContainer={() => document.getElementById('addressCascader')}*/}
      {/*/>)}*/}
      {/*</Col>*/}

      {/*时间查询*/}
      {/*<Col {...ColProps} xl={{span: 6}} md={{span: 8}} sm={{span: 12}} id="createTimeRangePicker">*/}
      {/*<FilterItem label="Createtime">*/}
      {/*{getFieldDecorator('createTime', {initialValue: initialCreateTime})(<RangePicker*/}
      {/*style={{width: '100%'}}*/}
      {/*onChange={handleChange.bind(null, 'createTime')}*/}
      {/*getCalendarContainer={() => {*/}
      {/*return document.getElementById('createTimeRangePicker')*/}
      {/*}}*/}
      {/*/>)}*/}
      {/*</FilterItem>*/}
      {/*</Col>*/}

      {/*查询按钮*/}
      <Col {...TwoColProps} xl={{span: 16}} md={{span: 24}} sm={{span: 24}}>
        <div style={{display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap'}}>

          <div>
            {/*<Button type="primary" className="margin-right" onClick={handleSubmit}>查询</Button>*/}
            <Button onClick={handleReset} style= {{marginLeft:16 }}>重置</Button>
          </div>

          <div className="flex-vertical-center">
            {/*单选按钮*/}
            {/* <Switch className="ant-switch-large"
                    style={{marginRight: 16 }}
                    defaultChecked={isMotion}
                    onChange={switchIsMotion}
                    checkedChildren="已发布链接"
                    unCheckedChildren="全部链接" 
                    /> */}
            {/*创建按钮*/}
            <Button type="ghost" onClick={onAdd} >创建</Button>
          </div>
        </div>
      </Col>
    </Row>
  )
}

LinkFilter.propTypes = {
  onAdd: PropTypes.func,
  isMotion: PropTypes.bool,
  switchIsMotion: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Form.create()(LinkFilter)
